﻿<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ESB Dashboard</title>
    <link rel="stylesheet" href="http://cdataportal.sh.ctripcorp.com/istyle/code/istyle.30626.css">
    <style>
        .thumbnail {
            overflow: hidden;
        }

            .thumbnail h2 {
                border-bottom: 1px solid #999999;
                text-align: center;
            }

        #delaydistr, #exception, #callway, #totalreq {
            height: 360px;
        }

        .tagtime {
            height: 22px;
            text-align: center;
            position: relative;
        }

        .tagtimeover {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 22px;
            background: rgba(255,255,255,0.75);
        }

        .time-prev {
            float: left;
        }

        .time-next {
            float: right;
        }
    </style>

</head>
<body>

    <div class="navbar">
        <div class="navbar-inner">
            <div class="logo" href="javascript:;">ESB Dashboard</div>

            <div class="form-inline pull-left" style="display: block;margin:10px 0 0 10px;position:relative;width:832px;">
                <div class="input-prepend">
                    <span class="add-on">设置开始时间</span>
                    <input type="text" id="startTime" placeholder="设置开始时间">
                    <span class="add-on" style="margin-left:5px;">设置结束时间</span>
                    <input type="text" id="endTime" placeholder="设置结束时间">
                    <div class="btn-group" style="margin-left:5px;">
                        <span class="add-on">间隔</span>
                        <button class="btn dropdown-toggle" data-toggle="dropdown"><span id="intervalVal" v="1m">1分钟</span> <b class="caret"></b></button>
                        <ul id="intervalOptions" class="dropdown-menu">
                            <li><a href="javascript:void(0);" v="1m">1分钟</a></li>
                            <li><a href="javascript:void(0);" v="3m">3分钟</a></li>
                            <li><a href="javascript:void(0);" v="5m">5分钟</a></li>
                            <li><a href="javascript:void(0);" v="30m">30分钟</a></li>
                            <li><a href="javascript:void(0);" v="1h">1小时</a></li>
                            <li><a href="javascript:void(0);" v="1d">1天</a></li>
                            <li><a href="javascript:void(0);" v="7d">7天</a></li>
                            <li><a href="javascript:void(0);" v="1M">1个月</a></li>
                        </ul>
                    </div>
                    <button type="button" class="btn btn-primary" style="margin-left:5px;" id="submit">Submit</button>
                </div>
                <div class="mask" id="mask" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7)"></div>
            </div>
            <!-- <div class="pull-left" style="margin:10px 0 0 50px;color:#FFFFFF;">
                <label class="checkbox inline">
                    <input type="checkbox" id="realtime" value="1"> 实时
                </label>
                <span id="timer" style="display:none;vertical-align:middle;margin:0 0 0 20px;font-size:12px;color:#f90">大约在 <span id="leftsec" style="color:#FFFFFF;">60</span> 秒后自动更新数据</span>
            </div> -->
        </div>
    </div>
    <div class="row-fluid" style="border-bottom:2px solid #666666;padding-bottom:15px;">
        <div id="btnGroup" class="btn-group" style="margin-left:10px;">
            <button class="btn btn-inverse" apps="" services="">全部</button>
        </div>
        <input type="hidden" id="productName" name="productName" value="全部" />
        <input type="hidden" id="appIds" name="appIds" value="" />
        <input type="hidden" id="webServ" name="webServ" value="" />
    </div>
    <div class="row-fluid">
        <div style="padding:10px;">
            <div class="span6">
                <div class="thumbnail">
                    <div class="tagtime">
                        <button class="btn btn-mini time-prev" rev="delaydistr">前1小时</button>
                        <span class="label">开始时间:<span id="delaydistr_starttime"></span></span><i class="icon-resize-horizontal"></i><span class="label">结束时间:<span id="delaydistr_endtime"></span></span>
                        <button class="btn btn-mini time-next" rev="delaydistr">后1小时</button>
                        <div class="tagtimeover"></div>
                    </div>
                    <h2>响应延时分布</h2>
                    <div id="delaydistr"></div>
                </div>
            </div>
            <div class="span6">
                <div class="thumbnail">
                    <div class="tagtime">
                        <button class="btn btn-mini time-prev" rev="exception">前1小时</button>
                        <span class="label">开始时间:<span id="exception_starttime"></span></span><i class="icon-resize-horizontal"></i><span class="label">结束时间:<span id="exception_endtime"></span></span>
                        <button class="btn btn-mini time-next" rev="exception">后1小时</button>
                        <div class="tagtimeover"></div>
                    </div>
                    <h2>异常分布</h2>
                    <div id="exception"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div style="padding:10px;">
            <div class="span6">
                <div class="thumbnail">
                    <div class="tagtime">
                        <button class="btn btn-mini time-prev" rev="callway">前1小时</button>
                        <span class="label">开始时间:<span id="callway_starttime"></span></span><i class="icon-resize-horizontal"></i><span class="label">结束时间:<span id="callway_endtime"></span></span>
                        <button class="btn btn-mini time-next" rev="callway">后1小时</button>
                        <div class="tagtimeover"></div>
                    </div>
                    <h2>直连/非直连分布</h2>
                    <div id="callway"></div>
                </div>
            </div>
            <div class="span6">
                <div class="thumbnail">
                    <div class="tagtime">
                        <button class="btn btn-mini time-prev" rev="totalreq">前1小时</button>
                        <span class="label">开始时间:<span id="totalreq_starttime"></span></span><i class="icon-resize-horizontal"></i><span class="label">结束时间:<span id="totalreq_endtime"></span></span>
                        <button class="btn btn-mini time-next" rev="totalreq">后1小时</button>
                        <div class="tagtimeover"></div>
                    </div>
                    <h2>总请求量</h2>
                    <div id="totalreq"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="http://cdataportal.sh.ctripcorp.com/libs/jquery-1.9.1.min.js"></script>
    <script src="http://cdataportal.sh.ctripcorp.com/istyle/code/istyle.30626.js"></script>
    <script src="http://cdataportal.sh.ctripcorp.com/DVF/_src/core/CData-1.0.js"></script>
    <script src="Util.js"></script>
    <script src="Esb.db.js"></script>
    <script>
        Esb.init();
    </script>
</body>
</html>